<template>
    <div class="post-list">
        <article v-for="post in list" :key="post._id" class="card mb-5 shadow-sm">
            <div class="card-body" @click="router.push(`/wenzhang/${ post._id }`)">
                <h4>{{ post.title }}</h4>
                <div class="row my-3 align-items-center">
                    <div class="col-4">
                        <img :src="post.image?.url" alt="" class="rounded-lg w-100">
                    </div>
                    <div :class="{ 'col-8': post.image }">{{ post.excerpt }}</div>
                </div>
                <span>{{ post.createdAt }}</span>
            </div>
        </article>

    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { PostProps } from '@/store';
import { useRouter } from 'vue-router';
export default defineComponent({
    name: 'PostList',
    props:{
        list:{
            type: Array as PropType<PostProps[]>,
            required: true
        }
    },
    setup () {
        const router = useRouter()
        return {
            router
        }
    }
})
</script>

<style scoped>

</style>